<template>
	<page-frame logo="/static/images/teacher_title.png">
		<template #top>
			<!-- (menuButton.left - 110) + 'px' -->
			<view :style="{
				width: '158px',
				marginLeft: '16px'
			}">
				<!-- <u-search height="56rpx" placeholder="找专家 上尧君" :showAction="false" bgColor="#ffffff"
					v-model="page.params.keyWord" @search="search" @clear="clear" @custom="search"></u-search> -->
				<u-search height="56rpx" :placeholder="`已入驻 ${page.count} 位专家`" :showAction="false" bgColor="#ffffff"
					v-model="page.params.keyWord" @search="search" @change="search" @clear="clear"
					@custom="search"></u-search>
			</view>
		</template>
		<template #sticky>
			<view class="sticky-box">
				<up-scroll-list :indicator="false">
					<search-btn :name="page.params.type ? page.params.typeName : '类型'" @search="searchBtnClick({
							name: '类型',
							type: 'T'
						})" :active="page.params.type ? true:false "></search-btn>

					<search-btn :name="page.params.parentId ? page.params.parentFieldName : '领域'" @search="searchBtnClick({
							name: '领域',
							type: 'F'
						})" :active="page.params.parentId ? true:false "></search-btn>

					<search-btn :name="page.params.industryId ? page.params.industryName : '行业'" @search="searchBtnClick({
							name: '行业',
							type: 'I'
						})" :active="page.params.industryId ? true:false "></search-btn>

					<search-btn :name="page.params.cityCode ? page.params.cityName : '城市'" @search="searchBtnClick({
							name: '城市',
							type: 'C'
						})" :active="page.params.cityCode ? true:false "></search-btn>

					<search-btn :name="page.params.priceSection ? page.params.priceSectionName : '价格'" @search="searchBtnClick({
							name: '价格',
							type: 'P'
						})" :active="page.params.priceSection ? true:false "></search-btn>
				</up-scroll-list>
				<!-- <view class="top-tip">
					已入驻<text class="f-w-b u-p-l-6 u-p-r-6">{{ page.count }}</text>位专家
				</view> -->
			</view>
		</template>
		<template #area>
			<!-- <view v-if="page.list.length >0" class="u-p-t-80 u-p-l-12 u-p-r-12" style="overflow: hidden;" >
				<item v-for="teacher in page.list" :key="teacher.id" :info="teacher"></item>
			</view> -->
			<block v-if="page.list.length >0" >
				<teacher-card v-for="teacher in page.list" :key="teacher.id" :info="teacher" :teacher="teacher"  />
			</block>
			<EmptyData v-else text="未搜索到讲师"></EmptyData>
			<view class="u-p-t-12" v-if="page.total > page.params.pageSize">
				<u-loadmore line :fontSize="12" :status="page.loadStatus" nomoreText="更多精彩，敬请关注" />
			</view>
		</template>
	</page-frame>

	<u-popup :show="popShow" :round="24" @close="popShow = false" :safeAreaInsetBottom="false">
		<view class="pop-box">
			<view @click="popShow = false" class="close-icon">
				<up-icon name="close-circle-fill" color="#ccc" size="22"></up-icon>
			</view>
			<view class="text-center f-w-b f-s-18">{{ popData.name }}</view>
			<view class="box-area three-grid" v-if="popData.type != 'C'">
				<block v-if="popData.type == 'T'">
					<view v-for="(type,index) in teacherTypeList" :key="index" class="item-tag"
						:class="{ 'active' : type.value == page.params.type }"
						@click="selectTag(type,'type','typeName')">
						{{ type.name }}
					</view>
				</block>
				<block v-if="popData.type == 'F'">
					<view v-for="(field,index) in fieldList" :key="index" class="item-tag"
						:class="{ 'active' : field.value == page.params.parentId }"
						@click="selectTag(field,'parentId','parentFieldName')">
						{{ field.name }}
					</view>
				</block>
				<block v-if="popData.type == 'I'">
					<view v-for="(industry,index) in industryList" :key="index" class="item-tag"
						:class="{ 'active' : industry.value == page.params.industryId }"
						@click="selectTag(industry,'industryId','industryName')">
						{{ industry.name }}
					</view>
				</block>

				<block v-if="popData.type == 'P'">
					<view v-for="(price,index) in config.appInfo.priceAround" :key="index"
						class="item-tag text-center u-line-1"
						:class="{ 'active' : price.value == page.params.priceSection }"
						@click="selectTag(price,'priceSection','priceSectionName')">
						{{ price.name }}
					</view>
				</block>
			</view>
			<view class="_box-area" v-else>
				<view class="u-flex u-flex-between">
					<view class="city-left">
						<block v-for="province in cityList" :key="province.value">
							<view class="province-item u-line-1 " :class="{
								'city-active': province.value === page.params.provinceCode
							}" @click="selectProvince(province)">
								{{province.name}}
							</view>
						</block>
					</view>
					<view class="city-right u-flex-1 u-m-l-34 three-grid">
						<view v-for="city in childList" :key="city.value" class="item-tag"
							:class="{ 'active' : city.value == page.params.cityCode }"
							@click="selectTag(city,'cityCode','cityName')">
							{{ city.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import PageFrame from "@/components/PageFrame.vue"
	import teacherCard from "@/components/teacher-card.vue"
	import searchBtn from "@/components/search-btn.vue"
	import config from '@/config.js'
	import CityCard from "@/components/city_card.vue"
	import EmptyData from "@/components/EmptyData.vue"
	import Item from "@/components/teacher/Item.vue"
	
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"

	import {
		list
	} from '@/api/teacher.js'
	import {
		getIndustryList,
		getParentFieldList,
		getCityList,
		getAllCityList
	} from '@/api/config'
	import {
		toast
	} from "../utils/common"
	import {
		domainList
	} from "@/api/domain.js"

	const menuButton = uni.getMenuButtonBoundingClientRect()
	const bottom = menuButton.bottom
	const popShow = ref(false)
	const fieldList = ref([])
	const industryList = ref([])
	const cityList = ref([])
	const tabIndex = ref(0)
	// 弹窗的信息
	const popData = ref({})
	// 讲师类型
	const teacherTypeList = ref([{
			name: '全部',
			value: ''
		}, {
			name: '培训师',
			value: 'T'
		}, {
			name: '咨询师',
			value: 'C'
		},
		{
			name: '培训师&咨询师',
			value: 'L'
		}
	])
	// 城市child
	const childList = ref([])

	const page = ref({
		list: [],
		params: {
			keyWord: '',
			parentId: '',
			parentFieldName: '',
			industryId: '',
			industryName: '',
			priceSection: '',
			priceSectionName: '',
			pageNum: 1,
			pageSize: 8,
			type: '',
			typeName: '',
			provinceCode: '',
			cityCode: '',
			cityName: ''
		},
		loadStatus: 'nomore',
		//当前页
		currentPage: 1,
		// 总页数
		pages: 1,
		// 查询到的总条数
		total: 0,
		// 总数
		count: 0
	})
	//上拉刷新
	onReachBottom(() => {
		if (page.value.currentPage == page.value.pages) {
			page.value.loadStatus = 'nomore'
			return
		}
		page.value.params.pageNum++
		getList()
	})

	console.info(uni.getMenuButtonBoundingClientRect())

	getList()
	getIndustry()
	getLocationList()
	parentField()

	/**
	 * 查询条件点击事件
	 */
	function searchBtnClick(e) {
		popData.value = e
		popShow.value = true
	}


	/**
	 * 查询方法
	 */
	function search() {
		page.value.params.pageNum = 1
		uni.pageScrollTo({
			scrollTop: 1, //距离页面顶部的距离
			duration: 0 // 滚动动画时长
		})
		getList()
	}

	//获取列表
	function getList() {
		page.value.loadStatus = 'loading'
		list(page.value.params).then(resp => {
			const total = resp.total

			if (page.value.count === 0) {
				page.value.count = total
			}
			if (resp.currentPage === 1) {
				page.value.list = []
			}
			page.value.list = [...page.value.list, ...resp.rows]
			page.value.currentPage = resp.currentPage
			page.value.pages = resp.pages
			page.value.total = total
			popShow.value = false
			if (resp.currentPage == resp.pages || total == 0) {
				page.value.loadStatus = "nomore"
				return
			}

			page.value.loadStatus = 'loadmore'
		})
	}
	/**
	 * 父级领域
	 */
	function parentField() {

		domainList(page.value.params.type).then(resp => {
			const list = resp.data.map(f => {
				return {
					value: f.id,
					name: f.name
				}
			})
			fieldList.value = [{
					value: '',
					name: '不限'
				},
				...list,
			]

		})
	}
	/**
	 * 行业分类
	 */
	function getIndustry() {
		getIndustryList().then(resp => {
			const list = resp.data.map(i => {
				return {
					value: i.id,
					name: i.name
				}
			})
			industryList.value = [{
					value: '',
					name: '不限'
				},
				...list,
			]
		})
	}

	function selectTag({
		value,
		name
	}, key, _key) {
		page.value.params[key] = value
		page.value.params[_key] = name
		popShow.value = false
		if (key == 'type') {
			page.value.params.parentId = ''
			parentField()
		}
		search()
	}

	/**
	 * 获取所有城市
	 */
	function getLocationList() {
		getAllCityList().then(resp => {
			const list = resp.data.filter(c => c.level === 1 && c.children.length > 0).map(c => {
				return {
					value: c.id,
					name: c.shortName || c.name,
					children: c.children.map(d => {
						return {
							value: d.id,
							name: d.shortName || d.name
						}
					})
				}
			})
			cityList.value = [{
					value: '',
					name: '不限',
					children: [{
						value: '',
						name: '不限'
					}]
				},
				...list,
			]
			childList.value = [{
				value: '',
				name: '不限'
			}]
		})
	}

	const selectProvince = (e) => {
		page.value.params.provinceCode = e.value
		childList.value = e.children || []
	}

	/**
	/**
	 * 重置搜索条件
	 */
	function reset() {
		page.value.params.parentId = ''
		page.value.params.priceSection = ''
		page.value.params.industryId = ''
		page.value.params.cityCode = ''
		search()
	}
	onShareAppMessage(() => {
		return {
			title: '尧君智库-专家',
		}
	})
	onShareTimeline(() => {
		return {
			title: '尧君智库-专家'
		}
	})
</script>

<style lang="scss">
	::v-deep .u-scroll-list {
		padding-bottom: 0rpx !important;
	}

	.teacher {
		padding: 0 12px 20px 12px;

		.sticky-box {
			background-color: #f4f4f4;

			.top {
				padding: 15px 0 12px;
			}
		}
	}

	.seach-btn {
		border-radius: 8px;
		background-color: #eee;
		padding: 6px 8px;
	}

	.pop-box {
		position: relative;
		padding: 15px 12px;

		.close-icon {
			position: absolute;
			top: 16px;
			right: 18px;
		}

		.three-grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 12px;
			height: max-content;
		}

		.item-tag {
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 74rpx;
			line-height: 74rpx;
			background-color: #F4F6F8;
			color: #686A6B;
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.active {
			background: linear-gradient(to right, #5E9EE1, #457EE6);
			color: #fff;
		}

		._box-area {
			margin: 20px 6px;

			.city-right {
				max-height: 300px;
				overflow-y: scroll;
			}

			.city-left {
				max-height: 300px;
				overflow-y: scroll;
				border-right: 1px solid #F3F3F3;
				padding-right: 18px;

				.province-item {
					width: 128rpx;
					height: 52rpx;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					margin-bottom: 26rpx;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 52rpx;
					text-align: center;
				}

				.city-active {
					background: #2080F7 !important;
					color: #fff !important;
				}
			}
		}

		.box-area {
			max-height: 300px;
			overflow-y: scroll;
			margin: 20px 6px;


		}

	}

	.search-tag {
		border-radius: 4px;
		padding: 6px 10px;
		font-size: 12px;
		background-color: #fff;
		color: #606266;
		margin-right: 12px;
		border: 1rpx solid #fff;


		._name {
			width: max-content;
		}
	}

	.search-tag-active {
		color: #033FFF;
		border: 1rpx solid #033FFF;
	}


	::v-deep .u-search__content__input {
		font-size: 12px !important;
	}
</style>